<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { getColumnByCode, getColumnPage, uploadRichImg, uploadRichFile, updColumn } from "@/api/config/column";
import Pagination from "@/components/Pagination/index.vue";
import Edit from "./edit.vue";
import emitter from "@/utils/mitt";
const { proxy } = getCurrentInstance();

const queryParams = ref({
	pageNum: 1,
	pageSize: 10,
});

const viewFlag = [
	{
		label: "显示",
		value: "1",
		elTagType: "primary",
	},
	{
		label: "隐藏",
		value: "0",
		elTagType: "danger",
	},
];
const statusFlag = [
	{
		label: "可用",
		value: "1",
		elTagType: "primary",
	},
	{
		label: "不可用",
		value: "0",
		elTagType: "danger",
	},
];

const loading = ref(false);

const tableData = ref([]);
const rowId = ref(null);
const rowCode = ref(null);
const total = ref(0);
const search = () => {
	const params = queryParams.value;
	getTableData(params);
};
const getTableData = async (params) => {
	loading.value = true;
	const res = await getColumnPage(params);
	try {
		if (res.code === 200) {
			tableData.value = res.data;
			total.value = res.data.total;
		}
	} catch (e) {
		console.log(e);
	} finally {
		setTimeout(() => {
			loading.value = false;
		}, 100);
	}
};

// const handleDelete = async (row) => {
// 	proxy.$modal.confirm('是否确认删除文章编号为"' + row.id + '"的数据项?').then(async function () {
// 		const res = await delArticle({id: row.id})
// 		try {
// 			if(res.code === 200) {
// 				proxy.$modal.msgSuccess('删除成功')
// 				await getTableData(queryParams.value)
// 			}
// 		}
// 		catch(e) {
// 			console.log(e);
// 		}
// 	})
// }

const handleUpdate = async (row) => {
	rowId.value = row.id;
	rowCode.value = row.code;
	editVisible.value = true;
};

const addArticle = () => {
	rowId.value = null;
	rowCode.value = null;
	editVisible.value = true;
};

const editVisible = ref(false);
const closeEdit = (ifSubmit = false) => {
	rowId.value = null;
	rowCode.value = null;
	editVisible.value = false;
	if (ifSubmit) {
		search();
	}
};

onMounted(() => {
	search();
	emitter.on("closeEdit", (ifSubmit) => {
		closeEdit(ifSubmit);
	});
});
</script>

<template>
	<div class="app-container">
		<el-table v-loading="loading" :data="tableData" border row-key="id" :tree-props="{ children: 'childrenList' }" :default-expand-all="true">
			<el-table-column :show-overflow-tooltip="true" label="栏目名称" prop="name" />
			<el-table-column label="是否可用" prop="status" width="80">
				<template #default="scope">
					<dict-tag :options="statusFlag" :value="String(scope.row.status)" />
				</template>
			</el-table-column>
			<el-table-column label="是否隐藏" prop="isView" width="80">
				<template #default="scope">
					<dict-tag :options="viewFlag" :value="String(scope.row.isView)" />
				</template>
			</el-table-column>
			<el-table-column label="栏目类型" prop="type" width="160">
				<template #default="scope">
					<span v-if="scope.row.type == 1">菜单</span>
					<span v-if="scope.row.type == 2">链接</span>
					<span v-if="scope.row.type == 3">列表</span>
					<span v-if="scope.row.type == 4">内容</span>
				</template>
			</el-table-column>
			<el-table-column label="排序值" prop="sort" width="70" />
			<el-table-column class-name="small-padding fixed-width" label="操作" width="120">
				<template #default="scope">
					<el-button v-if="scope.row.parentId" :size="'small'" type="primary" icon="Edit" text @click="handleUpdate(scope.row)">编辑 </el-button>
					<!-- <el-button
						v-if="scope.row.parentId"
						:size="'small'"
						type="danger"
						icon="Delete"
						text
						@click="handleDelete(scope.row)"
					>删除
					</el-button> -->
				</template>
			</el-table-column>
		</el-table>
		<pagination
			v-show="total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="search"></pagination>

		<el-dialog
			v-model="editVisible"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:title="rowId ? '修改内容' : '添加内容'"
			:width="'90%'"
			center
			destroy-on-close
			@close="closeEdit">
			<edit class="dialogEdit" v-if="editVisible" :row-id="rowId" :row-code="rowCode" @close="closeEdit"></edit>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
.dialogEdit {
	height: calc(82vh - 120px) !important;
}
</style>
